<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      /* background-color: transparent; */ /* 透明背景 默认透明*/

      border: 50px solid transparent; /* 边框透明 */
      /* border-right-color: blue;
      border-bottom-color: aqua;
      border-left-color: blueviolet; */

      /*transparent 透明*/
      /* border-right-color: transparent;
      border-bottom-color: transparent;
      border-left-color: transparent; */
      border-top-color: orange;

      box-sizing: border-box; /* 盒子大小包含border和padding */

      /* 旋转 */
      transform-origin: center 25%; /* 原点在中心偏上25%的位置 */
      transform: rotate(180deg); /* 顺时针旋转180度 */

      /*
          所以利用border或者CSS的特性我们可以做出很多图形：
            https://css-tricks.com/the-shapes-of-css/#top-of-site
      */
    }
  </style>
</head>
<body>
  
  <div class="box"></div>

</body>
</html>